<template>
  <div>
    <a-form-model :model="form" :label-col="labelColA" :wrapper-col="wrapperColA" :colon="false">
      <a-row>
        <a-col :span="5" class="a-col-class">
          <a-form-model-item label="仪器名称" style="width: auto">
            <a-input v-model="form.name" placeholder="请输入仪器名称"></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="5" class="a-col-class">
          <a-form-model-item label="仪器型号">
            <a-input v-model="form.spareVersion" placeholder="请输入仪器型号"></a-input>
          </a-form-model-item>
        </a-col>
        <!-- <a-col :span="4" class="a-col-class">
          <a-form-model-item label="设备分类">
            <a-select v-model="form.type" placeholder="请选择设备分类(必填)">
              <a-select-option
                v-for="(item,index) in classList"
                :key="index"
                :value="item.id"
              >{{item.name}}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>-->
        <a-col :span="5" class="a-col-class">
          <a-form-model-item label="故障类型">
            <a-select allow-clear v-model="form.faultTypeId" placeholder="请选择故障类型">
              <a-select-option
                v-for="(item,index) in typeList"
                :key="index"
                :value="item.id"
              >{{item.name}}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="2" class="a-col-class">
          <a-form-model-item>
            <a-button type="primary" class="queryBtn btn-style__class" @click="getData">查询</a-button>
          </a-form-model-item>
        </a-col>
        <a-col :span="3" class="a-col-class">
          <a-form-model-item>
            <a-button type="primary" class="queryBtn btn-style__class" @click="onInput">录入</a-button>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
    <a-modal
      v-model="addPop"
      width="40%"
      title="录入 "
      centered
      @cancel="()=>faultForm = {createTime: moment()}"
      :maskClosable="false"
    >
      <a-form-model :model="faultForm" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="设备名称">
          <a-input v-model="faultForm.equipmentName"></a-input>
        </a-form-model-item>
        <a-form-model-item label="设备型号">
          <a-input v-model="faultForm.equipmentVersion"></a-input>
        </a-form-model-item>

        <a-form-model-item label="故障名称">
          <a-input v-model="faultForm.faultName" />
        </a-form-model-item>

        <a-form-model-item label="故障类型">
          <a-select v-model="faultForm.faultTypeId" placeholder="请选择故障类型">
            <a-select-option
              v-for="(item,index) in typeList"
              :key="index"
              :value="item.id"
            >{{item.name}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <!-- <a-form-model-item label="设备分类">
          <a-select v-model="faultForm.type" placeholder="请选择设备分类">
            <a-select-option
              v-for="(item,index) in classList"
              :key="index"
              :value="item.id"
            >{{item.name}}</a-select-option>
          </a-select>
        </a-form-model-item>-->
        <a-form-model-item label="解决方案">
          <a-textarea v-model="faultForm.faultSolution" :rows="4" />
        </a-form-model-item>
        <a-form-model-item label="上传时间">
          <a-date-picker
            v-model="faultForm.createTime"
            :defaultValue="faultForm.createTime"
            placeholder="创建时间"
          />
        </a-form-model-item>
        <a-form-model-item label="文件上传">
          <a-upload
              :multiple="true"
              :file-list="fileList"
              :remove="handleRemove"
              :before-upload="beforeUpload"
          >
            <a-button type="primary" class="btn-style__class">
              <a-icon type="upload" class="upIcon" />选择文件
            </a-button>
          </a-upload>
        </a-form-model-item>

      </a-form-model>

      <template slot="footer">
        <a-button
          class="btn-style__class"
          type="primary"
          :loading="uploading"
          @click="handleUpload"
        >{{ uploading ? '提交中' : '提交' }}</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
import moment from "moment";
import "moment/locale/zh-cn";
export default {
  data() {
    return {
      labelCol: { span: 5 },
      wrapperCol: { span: 17 },
      labelColA: { span: 9 },
      wrapperColA: { span: 15 },
      addPop: false,
      form: {
        currentPage: 1,
        pageSize: 10,
        type: "",
        name: "",
        spareVersion: "",
        faultTypeId: "",
      },
      tableData: null,
      faultForm: {
        faultName: "",
        createTime: moment(),
        faultSolution: "",
        faultTypeId: "",
        equipmentName: "",
        equipmentVersion: "",
        type: "",
      },
      moment,
      typeList: [],
      classList: [],
      fileList: [],
      uploading: false,
    };
  },
  props: {
    who: {
      type: String,
    },
  },
  methods: {
    getCurrentData() {
      return new Date().toLocaleDateString();
    },
    //获取故障类型，故障分类
    getType() {
      this.$api.getSolutionType().then((res) => {
        this.typeList = res.data.data;
      });
      this.$api.getSolutionClass().then((res) => {
        this.classList = res.data.data;
      });
    },
    //新增故障
    handleRemove(file) {
      const index = this.fileList.indexOf(file);
      const newFileList = this.fileList.slice();
      newFileList.splice(index, 1);
      this.fileList = newFileList;
    },
    beforeUpload(file) {
      this.fileList = [...this.fileList, file];
      return false;
    },

    handleUpload() {
      let time = new Date(
        JSON.parse(JSON.stringify(this.faultForm.createTime))
      ).getTime();
      const { fileList } = this;
      const formData = new FormData();
      fileList.forEach((file, index) => {
        formData.append("files[" + index + "]", file);
      });
      formData.append("faultName", this.faultForm.faultName);
      formData.append("faultSolution", this.faultForm.faultSolution);
      formData.append("faultTypeId", this.faultForm.faultTypeId);
      formData.append("createTime", time);
      formData.append("equipmentName", this.faultForm.equipmentName);
      formData.append("equipmentVersion", this.faultForm.equipmentVersion);

      if (this.who == "exhaustgas") {
        formData.append("type", 7);
      }
      if (this.who == "waterquality") {
        formData.append("type", 8);
      }
      if (this.who == "airstation") {
        formData.append("type", 9);
      }

      // this.uploading = true;
      this.$api
        .addFaultSolution(formData)
        .then((res) => {
          if (res.status == 200) {
            this.addPop = false;
            this.uploading = false;
            this.faultForm = {};
            this.faultForm = { createTime: moment() };
            this.fileList = [];
            this.$message.info("上传成功!");
            this.$emit("add", this.addPop);
          } else {
            this.$message.error("上传失败!");
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message.error("请求超时");
        });
    },

    //获取信息

    getData() {
      this.$emit("childFn", this.form);
      // this.form.name = '',
      // this.form.spareVersion = '',
      // this.form.faultTypeId = ''
    },
    //时间处理
    onChangeDate(date, dateString) {
      this.faultForm.createtime = moment(Date.now(), dateString)._i;
    },
    //新增弹出框
    onInput() {
      this.addPop = true;
    },
  },
  mounted() {
    this.getType();
    // this.getData();
  },
};
</script>

<style  scoped>
::v-deep .ant-form-item-label{
  width: auto;
}
::v-deep .upIcon {
  color: white;
}
.a-col-class {
  margin-right: 18px;
}

.btn-style__class {
  letter-spacing: 8px;
  background-color: #2c6a5f;
  border: 1px solid #2c6a5f;
}
::v-deep .ant-upload-list-item-name {
  color: rgba(255, 255, 255, 0.7);
}
::v-deep .ant-upload-list-item:hover {
  background: rgba(163, 159, 159, 0.253);
}
::v-deep .ant-upload-list-item:hover .ant-upload-list-item-info {
  background: transparent;
}
::v-deep .anticon-paper-clip {
  color: rgba(255, 255, 255, 0.7);
}
::v-deep .ant-upload-list-item-card-actions .anticon {
  color: rgba(255, 255, 255, 0.7);
}
</style>
